<template>
	<view class="login-container">
		<view class="login-form">
			<view class="logo-container">
				<h2>温室卷帘门控制系统</h2>
			</view>
			<view class="logo-container">
				<image src="/static/logo.png" class="login-logo" mode="aspectFit" />
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-tip">正在验证身份...</view>

			<view class="input-group">
				<text class="label">用户名</text>
				<view class="input-field">
					<input 
						type="text" 
						placeholder="请输入用户名" 
						v-model="username" 
						:class="{ 'input-error': error && !username }"
					/>
				</view>
			</view>

			<view class="input-group">
				<text class="label">密码</text>
				<view class="input-field">
					<input 
						type="password" 
						placeholder="请输入密码" 
						v-model="password" 
						:class="{ 'input-error': error && !password }"
					/>
				</view>
			</view>

			<!-- 错误提示 -->
			<view v-if="error" class="error-tip">{{ errorMsg }}</view>

			<button 
				class="login-button" 
				@click="handleLogin" 
				:disabled="loading"
			>
				{{ loading ? '登录中...' : '登录' }}
			</button>

			<view class="register-link">
				<text class="link-text" @click="navigateToForgot">忘记密码？</text>
				<text class="link-text" @click="navigateToRegister">注册账号</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			loading: false,
			error: false,
			errorMsg: '',
			users: [] // 存储用户数据
		};
	},

	onLoad() {
		this.fetchUsers();
	},

	methods: {
		// 获取用户数据
		async fetchUsers() {
			try {
				this.loading = true;
				const response = await uni.request({
					url: 'http://192.168.32.38/user', // 对应之前的用户数据接口
					method: 'GET',
					timeout: 10000
				});
				
				if (response.statusCode === 200) {
					this.users = response.data;
				} else {
					this.showError('数据获取失败');
				}
			} catch (error) {
				this.showError('网络请求失败');
			} finally {
				this.loading = false;
			}
		},

		// 登录处理
		handleLogin() {
			if (!this.username || !this.password) {
				this.showError('用户名或密码不能为空');
				return;
			}

			this.loading = true;
			this.error = false;
			this.errorMsg = '';

			// 验证用户（实际应通过后端API）
			const isValid = this.validateUser(this.username, this.password);

			if (isValid) {
				this.handleSuccess();
			} else {
				this.showError('用户名或密码错误');
			}
			this.loading = false;
		},

		// 用户验证逻辑
		validateUser(username, password) {
			return this.users.some(user => 
				user.username === username && 
				user.password === password 
			);
		},

		// 登录成功处理
		handleSuccess() {
			uni.showToast({
				title: '登录成功',
				icon: 'none',
				duration: 1500
			});
			// 存储登录状态（实际应存储Token）
			uni.setStorageSync('isLogin', true);
			uni.setStorageSync('userInfo', { username: this.username });
			// 跳转主页
			uni.reLaunch({ url: '/pages/index/index' });
		},

		// 错误提示
		showError(msg) {
			this.error = true;
			this.errorMsg = msg;
			uni.showToast({
				title: msg,
				icon: 'none',
				duration: 1500
			});
		},

		// 导航功能
		navigateToRegister() {
			uni.navigateTo({ url: '/pages/register/register' });
		},
		navigateToForgot() {
			uni.navigateTo({ url: '/pages/register/register' });
		}
	}
};
</script>

<style scoped>
/* 基础样式 - 修复uni-app兼容性问题 */
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20px;
	box-sizing: border-box;
}

.login-form {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 24px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-container {
	text-align: center;
	margin-bottom: 24px;
}

.login-logo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto;
}

.input-group {
	margin-bottom: 16px;
}

.label {
	display: block;
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
}

.input-field {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-sizing: border-box;
}

.input-field input {
	width: 100%;
	height: 100%;
}

.login-button {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 16px;
}

.login-button[disabled] {
	background-color: #e0e0e0;
	opacity: 0.6;
}

.register-link {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #007bff;
}

.link-text {
	text-decoration: none;
	cursor: pointer;
}

/* 状态样式 */
.loading-tip {
	text-align: center;
	color: #666;
	font-size: 14px;
	margin: 12px 0;
}

.error-tip {
	text-align: center;
	color: #ff4d4f;
	font-size: 14px;
	margin-top: 8px;
}

.input-error {
	border: 1px solid #ff4d4f;
}
</style>